<template>
  <div class="bg">
    <div class="login_container">
      <h2 class="title">欢迎登录</h2>
      <el-form :rules="rules" ref="loginForm" :model="loginForm" label-width="80px" class="loginForm">
        <el-form-item label="账号:" prop="u_name">
            <el-input prefix-icon="el-icon-user" v-model="loginForm.u_name" placeholder="请输入账号" style="width: 180px;left: -35px"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="u_pwd">
          <el-input prefix-icon="el-icon-lock" v-model="loginForm.u_pwd" placeholder="请输入密码" show-password style="width: 260px;"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="subForm">登录</el-button>
          <el-button type="info" size="medium" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        u_name: "",
        u_pwd: "",
      },
      rules: {
        u_name: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        u_pwd: [
          {required: true, message: '请输入密码', trigger: 'change'}
        ]
      }
    };
  },
  methods: {
    subForm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.userLogin();
        } else {
          this.$message.error("验证失败提示");
          return false;
        }
      });
    },
    async userLogin() {
      let {data: res} = await this.$axios.post('/user/userLogin', this.loginForm)
      console.log(res)
      if (res.success){
        console.log(res.data)
        this.$message.success("登录成功！！")
        // //存储token信息localStorage中
        window.localStorage.setItem("token",res.data.token)
        // //存放当前用户信息
        window.sessionStorage.setItem("u_id",res.data.u_id)
        window.sessionStorage.setItem("icon",res.data.icon)
        window.sessionStorage.setItem("u_role",res.data.u_role)
        window.sessionStorage.setItem("u_name",res.data.u_name)
        window.sessionStorage.setItem("u_realname",res.data.u_realname)
        window.sessionStorage.setItem("u_age",res.data.u_age)
        window.sessionStorage.setItem("u_workplace",res.data.u_workplace)
        window.sessionStorage.setItem("u_email",res.data.u_email)
        window.sessionStorage.setItem("u_phone",res.data.u_phone)
        window.sessionStorage.setItem("u_area",res.data.u_area)
        window.sessionStorage.setItem("u_address",res.data.u_address)
        window.sessionStorage.setItem("u_interestsandhobbies",res.data.u_interestsandhobbies)
        window.sessionStorage.setItem("u_message",res.data.u_message)
        window.sessionStorage.setItem("u_redgt",res.data.u_redgt)
        if (res.data.u_role === "0"){
          this.$router.push("/adminhome/homepage")
        }else if (res.data.u_role === "1"){
          this.$router.push("/userhome/homepage")
        }
      }else {
        this.$message.error("登陆失败")
      }
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    }
  },
};
</script>

<style scoped>
.bg {
  background-size: cover; /* 覆盖整个背景 */
  height: 100%; /* 使用视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_container {
  width: 380px;
  height: 300px;
  background-color: white;
  position: relative; /* 使用相对定位 */
  border-radius: 10px;
  opacity: 0.7;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

.title {
  text-align: center;
  margin-top: 10px; /* 增加标题与表单之间的间距 */
}

.el-form-item {
  margin-bottom: 20px; /* 增加表单项之间的间距 */
}

.el-select, .el-input {
  margin-right: 20px; /* 增加选择框和输入框之间的间距 */
}

.el-select {
  width: 100px; /* 调整选择框的宽度 */
}

.el-input {
  width: 230px; /* 调整输入框的宽度 */
}

.el-button--info {
  margin-left: 10px; /* 调整重置按钮与登录按钮的距离 */
}

/* 处理浏览器自动填充时的背景颜色和文本颜色 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px lemonchiffon inset !important; /* 设置背景颜色 */
  -webkit-text-fill-color: black !important; /* 设置文本颜色 */
}
</style>